<template>
    <div>
        <div v-if="!utils.getIsApp()" class="common-header-wrap">
            <mt-header class="common-header" title="付款">
                <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>
        <div class="tea-pay-head">
            <div class="tea-pay-title">请选择付款方式</div>
            <div class="tea-pay-price">合计：<span style="color:#3C7C45">¥{{info.pay_info.need_amount}}</span></div>
        </div>
        <mt-radio
                align="right"
                v-model="payment_info.payment_code"
                :options="options">
        </mt-radio>
        <div class="tea-pay-button" @click="getTravelbuygopay">立即付款</div>

    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {getTravelbuypay, getTravelbuygopay, getTravelorderdetail} from '../../../api/travel'
    import {Radio, MessageBox, Toast} from 'mint-ui';
    import {loadScript} from '../../../util/common'
    // import {loadScript} from '../../../util/common'

    export default {
        name: 'Teatravelpay',
        data() {
            return {
                pay_sn: this.$route.query.payer_sn ? this.$route.query.payer_sn : '', //支付单号
                pay_type: 'pay_new', //支付接口后缀
                options: [],
                pd_pay: '', // 支付方式
                info: '', //付款数据
                // 提交支付需要用到的数据
                payment_info: {
                    password: '', // 支付密码
                    rcb_pay: 0, // 是否使用充值卡进行支付
                    pd_pay: 0, // 是否使用预存款进行支付
                    payment_code: '', // 支付方式
                },
            }
        },
        components: {
            Radio,
            MessageBox
        },
        computed: {
            ...mapState({
                banners: state => state.home.banners,
                token: state => state.member.token,
            })
        },
        mounted() {
            // this.getTravelorderdetail();
            this.getTravelbuypay();
            loadScript('weixin', 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js', function () {
                wx.miniProgram.getEnv(function (res) {
                    let indexof = -1
                    let temp = _this.payment_list
                    let j = temp.indexOf('allinpay_h5')

                    if (res.miniprogram) {
                        indexof = temp.indexOf('wxpay_jsapi')
                        if (j >= 0) {
                            temp[j] = 'allinpay_h5_W06'
                        }
                    } else {
                        indexof = temp.indexOf('wxpay_minipro')
                        if (j >= 0) {
                            temp[j] = 'allinpay_h5_W02'
                        }
                    }
                    if (indexof > -1) {
                        temp.splice(indexof, 1)
                    }
                    if (indexof > -1 || j > -1) {
                        _this.payment_list = temp
                    }
                })
            })
        },
        methods: {
            // goTeatraveldetail() {
            //     this.$router.push({name: 'HomeTeatraveldetail'})
            // },

            //获取付款信息
            getTravelbuypay() {
                getTravelbuypay(this.$route.query.payer_sn, 1).then(res => {
                    this.info = res.result;
                    let options = [];
                    this.payment_info.payment_code = res.result.pay_info.payment_list[0].payment_code;
                    for (let i = 0; i < res.result.pay_info.payment_list.length; i++) {
                        options.push({
                            label: res.result.pay_info.payment_list[i].payment_name,
                            value: res.result.pay_info.payment_list[i].payment_code
                        })
                    }
                    this.options = options;
                }).catch(function (error) {
                    Toast(error.message)
                })
            },

            //立即付款
            getTravelbuygopay() {
                if (this.payment_info.payment_code == 'wxpay_minipro') {
                    wx.miniProgram.redirectTo({url: '../pay/pay?action=' + this.pay_type + '&key=' + this.token + '&pay_sn=' + this.pay_sn + '&password=' + this.payment_info.password + '&rcb_pay=' + this.payment_info.rcb_pay + '&pd_pay=' + this.payment_info.pd_pay + '&payment_code=' + this.payment_info.payment_code + '&type=tea'})
                    return
                }
                getTravelbuygopay(this.$route.query.payer_sn, this.pd_pay, this.token).then((res) => {
                    document.write(res)
                }).catch(function (error) {
                    if (error.message) {
                        Toast(error.message)
                    } else {
                        document.write(error)
                    }
                })
            },


            //获取详情
            // getTravelorderdetail() {
            //     getTravelorderdetail(this.$route.query.id).then(res => {
            //         if(res.result.order_state!=2){
            //              this.$router.push({name:'HomeTeaorderlist'})
            //              return;
            //         }
            //         this.info = res.result
            //     })
            // }
        }
    }
</script>

<style scoped lang='scss'>
    .tea-pay-group {
        display: flex;
        flex-direction: column;

        .tea-pay-list {
            font-size: .7rem;
            font-weight: bold;
        }
    }

    .tea-pay-head {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        padding: 1rem 36px;
        background: white;

        .tea-pay-title {
            font-size: .8rem;
            font-weight: bold;
        }

        .tea-pay-price {
            margin-top: 5px;
            font-size: .7rem;
        }
    }

    /deep/ .mint-cell:after {
        background: white;
        left: 0;
        right: 0;
    }

    /deep/ .mint-radio-label {
        font-weight: bold;
    }

    .tea-pay-button {
        background: $primaryColor;
        color: white;
        font-size: .8rem;
        font-weight: bold;
        text-align: center;
        border-radius: 5px;
        padding: 10px 0;
        margin: 0 36px;
        margin-top: 80px;
    }
</style>
